<template>
  <div class="remind_detail">

    <div class="remind_detail_fun" v-if="isEdit">
      <!-- <div class="remind_detail_fun"> -->
      <img style="margin-right:20px" @click.stop.prevent="isEdit = !isEdit" src="static/image/home/contact/icon_edit.png" />
      <img src="static/image/home/contact/icon_del.png" @click.stop.prevent="delRemind" />
      <!-- <img src="static/image/word/delete.png" @click.stop.prevent="delRemind" /> -->
      <!-- <span style="color:#D8D8D8;margin:0 24px">|</span>
      <img @click="goBack" style="vertical-align: middle;" src="static/image/word/close.png" alt=""> -->
    </div>
    <div class="remind_detail_fun active" v-if="!isEdit">
      <div class="offficialAdd_sub">
        <div class="offficialAdd_sub_color" @click.stop.prevent="addRemind">
          {{ "完成" }}
        </div>
        <div @click.stop.prevent="isEdit = !isEdit">{{ "取消" }}</div>
      </div>
    </div>
    <div class="remind_index_tab_d">
      <div class="remind_index_tab_d_back">
        <img src="static\image\search\page_back.png" alt="" @click="goBack" />
        <!-- <img src="static/image/word/icon_24pt-2.png" alt="" @click="goBack" /> -->
      </div>
      <el-tabs class="remind_detail_tab" v-model="activeName">
        <el-tab-pane label="待办详情" name="1">
          <div class="remind_detail_item">
            <div class="remind_detail_item_top" v-if="isEdit">
              <div class="remind_detail_item_top_l">
                <img v-if="formMsg.ISDONE == 0" src="static/image/home/contact/checkbox_default.png" @click.stop.prevent="updateIsDone" />
                <img v-else src="static/image/home/contact/thing_finish.png" @click.stop.prevent="updateIsDone" />
                <div>{{ formMsg.ISDONE == 0 ? "完成标记" : "已完成" }}</div>
              </div>
              <div class="remind_detail_item_top_r" v-if="
                  new Date().getTime() >
                    new Date(formMsg.REMIND_TIME).getTime() &&
                  formMsg.ISDONE == 0
                ">
                已超时
              </div>
            </div>
            <!-- zk修改，v-html -->

            <div class="remind_detail_item_content" v-html="formMsg.VALUE">
              <!-- {{ formMsg.VALUE }} -->
            </div>
            <!-- <div class="remind_detail_item_content" v-else>
            <el-input type="textarea" v-model="formMsg.VALUE"></el-input>
          </div> -->
            <div class="remind_detail_item_bottom">
              <div class="remind_detail_item_bottom_name">
                <img src="static/image/home/contact/thing_source.png" />
                <img src="static/image/word/user.png" />
                <div>来源</div>
                <div>{{ formMsg.FROM_NAME }}</div>
                <div>{{ formMsg.CREATEDATE }}</div>
              </div>
              <div class="remind_detail_item_bottom_time">
                <img src="static/image/home/contact/thing_reminder_time.png" />
                <img src="static/image/word/time.png" />
                <div>提醒时间</div>
                <div v-if="isEdit">{{ formMsg.REMIND_TIME }}</div>
                <div v-else class="remind_detail_item_bottom_time_t">
                  <el-date-picker size="small" @change="timeChange" v-model="formMsg.REMIND_TIME" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <!-- <div style="margin-top:26px" class="remind_detail_item_top" v-if="isEdit">
              <div class="remind_detail_item_top_l">
                <img v-if="formMsg.ISDONE == 0" src="static/image/home/contact/checkbox_default.png" @click.stop.prevent="updateIsDone" />
                <img v-else src="static/image/home/contact/thing_finish.png" @click.stop.prevent="updateIsDone" />
                <div>{{ formMsg.ISDONE == 0 ? "未完成" : "已完成" }}</div>
              </div>
              <div class="remind_detail_item_top_r" v-if="
                  new Date().getTime() >
                    new Date(formMsg.REMIND_TIME).getTime() &&
                  formMsg.ISDONE == 0
                ">
                已超时
              </div>
            </div> -->

          </div>
          <div class="remind_foot">

            <div class="foot_page_per" v-show="getoffName(1)" @click="changeFormMsg(1)">
              上一条
            </div>
            <div class="foot_page_next" v-show="getoffName(0)" @click="changeFormMsg(0)">
              下一条
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    formMsg: {
      type: Object,
      default: () => {
        return [];
      },
    },
    remindOfficialList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      currentIndex: 0,
      activeName: "1",
      isEdit: true,
    };
  },
  mounted() {
    this.getCurrentIndex();
  },
  methods: {
    getCurrentIndex() {
      //查询当前公文的下标
      this.remindOfficialList.find((value, index) => {
        if (value.ID == this.formMsg.ID) {
          return (this.currentIndex = index);
        }
      });
    },

    changeFormMsg(flag) {
      console.log("dianji");
      flag ? this.currentIndex-- : this.currentIndex++;

      this.$emit("changeFormMsg", this.currentIndex);
    },
    getoffName(flag) {
      let index = flag ? this.currentIndex - 1 : this.currentIndex + 1;
      console.log(flag, index, 139);
      if (index >= 0 && index < this.remindOfficialList.length) {
        return this.remindOfficialList[index].VALUE.length > 13
          ? this.remindOfficialList[index].VALUE.slice(0, 13) + "..."
          : this.remindOfficialList[index].VALUE;
      } else {
        return "";
      }
    },

    timeChange(time) {
      this.addRemind();
    },
    // 更新完成状态
    updateIsDone() {
      this.$emit("updateIsDone");
    },
    // 删除待办
    delRemind() {
      this.$emit("delRemind");
      setTimeout(() => {
        this.goBack();
      }, 1500);
    },
    // 添加待办
    addRemind() {
      this.$emit("addRemind");
      // this.isEdit = !this.isEdit;
    },
    //返回上一级
    goBack() {
      this.$emit("goBack", 2);
    },
  },
};
</script>
<style lang="less" scoped>
.remind_detail {
  width: 100%;
  height: 100%;
  position: relative;
  .remind_detail_tab {
    width: 100%;
    padding: 20px;
    /deep/.el-tabs__active-bar {
      width: 70px;
    }
    /deep/.el-tabs__item {
      width: 70px;
      text-align: center;
      padding: 0;
    }
    /deep/.el-tabs__nav-wrap::after {
      content: "";
      background-color: #eeeeee;
      height: 1px;
    }
    /deep/.el-table--border,
    /deep/.el-table__body-wrapper {
      height: auto !important;
    }
  }
  .remind_detail_fun {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 40px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
    img:first-of-type {
      // margin-right: 20px;
    }
  }
  .remind_detail_fun.active {
    // top: unset;
    bottom: 20px;
  }
  .remind_foot {
    height: 48px;
    background: #fafafa;
    position: fixed;
    bottom: 0;
    left: 250px;
    right: 5px;
    line-height: 48px;

    color: #e67529;
    padding: 0 10px;
    .foot_page_per {
      display: flex;
      align-content: center;
      float: left;
    }
    .foot_page_next {
      float: right;
    }
    div {
      cursor: pointer;
    }
  }
  .remind_detail_item {
    .remind_detail_item_top {
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      .remind_detail_item_top_l {
        display: flex;
        align-items: center;
        color: #999999;
        img {
          width: 16px;
          height: 16px;
          margin-right: 15px;
        }
      }
      .remind_detail_item_top_r {
        border: 1px solid #ff887f;
        padding: 2px 5px;
        border-radius: 3px;
        color: #ff3224;
        background: #fff5f5;
      }
    }
    .remind_detail_item_content {
      font-size: 15px;
      line-height: 22px;
      word-break: break-all;
      margin: 10px 0 30px 0;
    }
    .remind_detail_item_bottom {
      .remind_detail_item_bottom_name,
      .remind_detail_item_bottom_time {
        display: flex;
        align-items: center;
        color: #999;
        img {
          margin-right: 10px;
        }
        div:first-of-type {
          width: 100px;
        }
        .remind_detail_item_bottom_time_t {
          /deep/.el-input {
            width: 200px !important;
            /deep/.el-input__inner {
              // line-height: 30px;
              padding-right: 0 !important;
            }
            /deep/.el-input__prefix {
              .el-input__icon,
              .el-icon-time {
                line-height: 28px;
              }
            }

            /deep/.el-input__suffix {
              .el-input__suffix-inner {
                .el-input__icon {
                  line-height: 28px;
                }
              }
            }
          }
        }
      }
      .remind_detail_item_bottom_name {
        margin-bottom: 15px;
        div:nth-of-type(2) {
          position: relative;
          margin-right: 20px;
        }
        div:nth-of-type(2)::after {
          // content: "";
          width: 1px;
          height: 100%;
          background: #999999;
          position: absolute;
          right: -10px;
        }
      }
    }
  }
  .offficialAdd_sub {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    .offficialAdd_sub_color {
      border: 1px solid #fa7500;
      background: #fa7500;
      color: #ffffff;
    }
    .offficialAdd_sub_chat {
      width: unset;
      padding: 0 20px;
    }
    .offficialAdd_sub_up {
      border: 1px solid #fa7500;
      color: #fa7500;
    }
    div {
      width: 80px;
      height: 28px;
      border-radius: 4px;
      border: 1px solid #dddddd;
      font-size: 12px;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-right: 16px;
    }
    div:hover {
      border: 1px solid #fa7500;
      color: #fa7500;
    }
    .offficialAdd_sub_color:hover {
      border: 1px solid #fa7500;
      color: #ffffff;
    }
  }
}
.remind_index_tab_d {
  display: flex;
  .remind_index_tab_d_back {
    position: relative;
    top: 35px;
    left: 10px;
    cursor: pointer;
  }
}
</style>
